<template>
  <div class="team-box">
    <!--我的直推人-->
    <div class="session">
      <p class="p-title">
        <span> 我的直推人</span>
      </p>
      <div class="content">
        <!--<div class="vip-no">-->
          <!--<p>会员编号：566824568754</p>-->
        <!--</div>-->
        <div class="fl-flex" v-if="direct!=null">
          <div class="fl-left">
            <img :src="direct.headImg" alt="">
          </div>
          <div class="fl-right">
            <p>{{direct.nickname}}</p>
            <div class="discribe">

            </div>
            <div class="summary">
              <span class="position">{{direct.level==1?"普通会员":(direct.level==2?"VIP会员":(direct.level==3?"侍酒师":(direct.level==4?"银牌代理":(direct.level==5?"金牌代理":"区域代理"))))}}</span>
              <!--<span class="gender">女</span>-->
              <!--<span class="age">25岁</span>-->
            </div>
          </div>
        </div>
        <div class="fl-flex" v-if="direct==null" style="color:darkgrey">暂无直推人</div>
      </div>
    </div>
    <!--我推荐的  我间推的 -->
    <div class="session">
      <ul class="tabs-box">
        <li v-for="(item,index) in tabs" @click="isTab=index,teamManage(index)"><span :class="{on:isTab==index}">{{item}}</span></li>
      </ul>
      <div class="content">
        <!--<div class="vip-no">-->
          <!--<p>会员编号：566824568754</p>-->
        <!--</div>-->
        <div class="vip-list" v-for="(item,index) in users">
          <div class="fl-flex">
            <div class="fl-left">
              <img :src="item.headImg" alt="">
            </div>
            <div class="fl-right">
              <p>{{item.nickname}}</p>
              <div class="discribe">

              </div>
              <div class="summary">
                <span class="position is-agent">{{item.level==1?"普通会员":(item.level==2?"VIP会员":(item.level==3?"侍酒师":(item.level==4?"银牌代理":(item.level==5?"金牌代理":"区域代理"))))}}</span>
                <!--<span class="gender">女</span>-->
                <!--<span class="age">25岁</span>-->
              </div>
            </div>
          </div>
          <div class="fl-income">
            <div class="fi-item">
              今日收益<span>{{item.todayAward}}</span>元
            </div>
            <div class="fi-item">
              总收益<span>{{item.allAward!=null?item.allAward:0}}</span>元
            </div>
          </div>
        </div>
        <!--<div class="vip-list">-->
          <!--<div class="fl-flex">-->
            <!--<div class="fl-left">-->
              <!--<img src="../../assets/images/p-1.png" alt="">-->
            <!--</div>-->
            <!--<div class="fl-right">-->
              <!--<p>最好的侍酒师</p>-->
              <!--<div class="discribe">-->
                <!--最好的侍酒师最好的侍酒师最好的侍酒师最好的侍酒师最好的侍酒师最好的侍酒师最好的侍酒师-->
              <!--</div>-->
              <!--<div class="summary">-->
                <!--<span class="position is-agent">金牌代理</span>-->
                <!--<span class="gender">女</span>-->
                <!--<span class="age">25岁</span>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="fl-income">-->
            <!--<div class="fi-item">-->
              <!--今日收益<span>100000</span>元-->
            <!--</div>-->
            <!--<div class="fi-item">-->
              <!--总收益<span>999999</span>元-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>

<script>

  import global from '../public/global.vue'
  export default {
    name: 'name',
    data() {
      return {
        tabs: ["我推荐的", "我间推的"],//tab标签切换
        isTab: 0,
        users:[],//下级用户
        direct:{}
      }
    },
    methods:{
      teamManage:function(type){
        let uid = global.getCookie("uid");
        let url = global.apiUrl;
        this.$http.get(url + '/user/teamManage', {
          params: {
            uid: uid,
            type:type
          },
        }).then(res => {
          if(res.data.code==0){
            this.users = res.data.data
            console.log(res);
          }
        }).catch(function (err) {
          console.error(err);
        })
      },
      myDirect:function(type){
        let uid = global.getCookie("uid");
        let url = global.apiUrl;
        this.$http.get(url + '/user/myDirect', {
          params: {
            uid: uid,
          },
        }).then(res => {
          if(res.data.code==0){
            this.direct = res.data.data
            console.log(res);
          }
        }).catch(function (err) {
          console.error(err);
        })
      },
    },
    created:function () {
      document.title="我的团队"
      this.teamManage(0);
      this.myDirect();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .team-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: #f3f3f3;
    font-size: 1rem;
    .session {
      width: 100%;
      margin-bottom: 10px;
      .p-title {
        width: 100%;
        margin: 20px auto 10px;
        font-size: 0.95rem;
        padding: 0 2.5%;
        span {
          padding-left: 5px;
          border-left: 4px solid #d44242;
        }
      }
      .content {
        width: 100%;
        .vip-no {
          color: #aaa;
          height: 3rem;
          line-height: 3rem;
          padding: 0 2.5%;
          background: #fff;
          p {
            width: 100%;
            height: 100%;
            border-bottom: 1px solid #eee;
          }
        }
        .vip-list {
          width: 100%;
        }
        .fl-flex {
          width: 100%;
          padding: 3% 2.5% 1%;
          background: #fff;
          display: flex;
          .fl-left {
            img {
              width: 100px;
              height: 100px;
            }
          }
          .fl-right {
            margin-left: 10px;
            overflow: hidden;
            p {
              height: 1.5rem;
            }
            .discribe {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              font-size: 0.8rem;
              color: #aaa;
              margin-bottom: 5px;
            }
            .summary {
              height: 30px;
              line-height: 30px;
              padding: 0 2px;
              font-size: 0.8rem;
              color: #fff;
              .position, .gender, .age {
                padding: 1px 10px;
                border-radius: 15px;
              }
              .position {
                background: #FB3F40;
              }
              .gender, .age {
                background: #FF6978;
              }
              .is-agent {
                background: #FCBD06;
              }
            }

          }
        }
        .fl-income {
          width: 100%;
          height: 2rem;
          line-height: 2rem;
          font-size: 0.85rem;
          padding:0 2.5%;
          background: #fff;
          margin-bottom: 5px;
          display: flex;
          justify-content: space-between;
          .fi-item {
            flex:1;
            white-space: nowrap;
            overflow: hidden;
            color: #aaa;
            box-sizing: border-box;
            border-top:1px solid #f3f3f3;
            text-align: center;
            span {
              color: #D44242;
            }
          }
          .fi-item:last-child {
            padding-left: 5px;
          }
        }
      }
      .tabs-box {
        width: 100%;
        height: 2.6rem;
        line-height: 2.6rem;
        background: #fff;
        border-bottom: 1px solid #eee;
        display: flex;
        li {
          flex: 1;
          text-align: center;
          span {
            font-size: 0.9rem;
            color: #666;
            display: inline-block;
            height: 100%;
            box-sizing: border-box;
          }
          .on {
            font-weight: bold;
            color: #d44242;
            border-bottom: 2px solid #d44242;
          }
        }
      }

    }
  }
</style>
